import React, { FC, useState, useEffect } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
import { Avatar, Divider, List, Skeleton, Select } from 'antd';
// import Abc, { CommonTable } from 'ax-react-components';

interface DataType {
  gender: string;
  name: {
    title: string;
    first: string;
    last: string;
  };
  email: string;
  picture: {
    large: string;
    medium: string;
    thumbnail: string;
  };
  nat: string;
}

const RollingLoad: FC = () => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<DataType[]>([]);
  const [select_data, setSelect_data] = useState<
    { label: number; value: number }[]
  >([]);
  const [pageOptions, setPageOptions] = useState({
    page: 1,
    pageSize: 10,
  });

  useEffect(() => {
    // eslint-disable-next-line radix
    const selectData = [
      ...Array(parseInt(String(Math.random() * 90 + 10), 10)),
    ].map((item, key) => {
      return {
        value: key,
        label: key,
      };
    });

    setSelect_data((origin) => [...origin, ...selectData]);
  }, [pageOptions]);

  const loadMoreData = () => {
    if (loading) {
      return;
    }

    setLoading(true);
    fetch(
      'https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo'
    )
      .then((res) => res.json())
      .then((body) => {
        setData([...data, ...body.results]);
        setLoading(false);
      })
      .catch(() => {
        setLoading(false);
      });
  };

  useEffect(() => {
    loadMoreData();
  }, []);

  const handleScroll = (e: any) => {
    e.persist();
    // 判断滑动到底部
    const { scrollTop, scrollHeight, clientHeight } = e.target;
    return scrollHeight - scrollTop === clientHeight;
  };

  const handlePopupScroll = (e: any) => {
    if (handleScroll(e) && select_data.length) {
      setPageOptions((origin) => ({
        ...origin,
        page: origin.page + 1,
      }));
    }
  };

  return (
    <>
      <h1>Select 无限下拉加载</h1>
      <Select
        showSearch
        style={{ width: 200 }}
        placeholder="请选择"
        onPopupScroll={handlePopupScroll}
        filterOption={false}
        options={select_data}
      ></Select>
      <h1>List 无限下拉加载</h1>
      <div
        id="scrollableDiv"
        style={{
          height: 400,
          overflow: 'auto',
          padding: '0 16px',
          border: '1px solid rgba(140, 140, 140, 0.35)',
        }}
      >
        <InfiniteScroll
          dataLength={data.length}
          next={loadMoreData}
          hasMore={data.length < 50} // hasMore为true时,滚动到底部是才会调用next函数,反之会显示endMessage信息
          loader={
            <Skeleton
              avatar
              paragraph={{
                rows: 1,
              }}
              active
            />
          }
          endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
          scrollableTarget="scrollableDiv"
        >
          <List
            dataSource={data}
            renderItem={(item) => (
              <List.Item key={item.email}>
                <List.Item.Meta
                  avatar={<Avatar src={item.picture.large} />}
                  title={<a href="https://ant.design">{item.name.last}</a>}
                  description={item.email}
                />
                <div>Content</div>
              </List.Item>
            )}
          />
        </InfiniteScroll>
      </div>
    </>
  );
};

export default RollingLoad;
